<template>
  <!-- <div>首页</div> -->
  <div>
   <carouser></carouser>
   <!-- 搜索自动补全 -->
   <SelfSearch ></SelfSearch>
   <el-row :gutter="20">
    <el-col :span="20">
      <level></level>
      <region></region>
      <div class="hospital">
        <card v-for="(index,key) in 10" :key="key" class="item"></card>
        <el-pagination  
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
          
        </el-pagination>
      </div>
    </el-col>
    <el-col :span="4">324</el-col>
   </el-row>
  </div>
</template>

<script setup lang="ts" >
 import  carouser from "./carouser.vue"
 import  SelfSearch from "./search.vue";
  import level from "./leveal.vue";
import region from "./region.vue";
import card from "./card/index.vue";
import {ref} from "vue"
// 默认页码
let pageNo:number = ref<number>(1)

let pageSize:number = ref<number>(10)
  
</script>

<style lang="scss" scoped>
.hospital{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  .item{
    width: 48%;
    margin: 10px 0;
  }
}
</style>
